<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<%

    String name=request.getSession().getAttribute("username").toString();
%>
<head>
    <meta charset="utf-8">
    <title>Message board 主页界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <link href="/static/css/UserIndex.css" rel="stylesheet">
    <script src="static/js/jquery.min.js"></script>
    <script src="/static/layui/js/layui.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black" style="user-select: none"><a href="#">Message board</a></div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li id="hitokoto" class="layui-nav-item layui-hide-xs" onclick="getHitokoto()"><a href="javascript:;">随机一言展示区</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
<%--                    <%=name%>--%>
<%--                    https://api.vvhan.com/api/avatar/rand 调用api随机获取一个头像--%>
                    <img src="https://api.vvhan.com/api/avatar/rand" class="layui-nav-img"> ${username}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user/UserMessage">个人页面</a></dd>
                    <dd><a href="/user/Forget.jsp">修改密码</a></dd>
                    <dd><a href="/user/logout">退出登录</a></dd>
                    <dd><a href="/user/DeleteUser?id=<%=request.getSession().getAttribute("id")%>">注销用户</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a id="Info" data-id="a" href="javascript:void(0)" onclick="getIndex()">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a id="Notice" class="" href="javascript:void(0)" onclick="getAnocement()">系统公告</a>
                </li>
                <li class="layui-nav-item">
                    <a id="Message" href="javascript:void(0)" onclick="getMessage()">我要留言</a>
                </li>
                <li class="layui-nav-item">
                    <a id="Manage" data-id="a" href="javascript:void(0)" onclick="getManage()">管理留言</a>
                </li>
                <li class="layui-nav-item">
                    <a id="Recycle " href="javascript:void(0)" onclick="getRecycle()">回收站</a>
                </li>
                <li class="layui-nav-item">
                    <a id="magic" href="javascript:void(0)" onclick="getRandom()">任意门</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
<%--            <blockquote class="layui-elem-quote layui-text">--%>
<%--                Layui 框体布局内容主体区域--%>
<%--            </blockquote>--%>
    <div class="layui-card layui-panel ifr-body">
        <iframe id="ifr" src="/Home.jsp" name="notice_content" frameborder=”no” border=”0″ class="larry-iframe" style="width:100%;height:100%" onload="iFrameHeight()"></iframe>
    </div>
            <br><br>
        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <footer id="footer">
            <p>© 2024 From Message Board Technology Team. All rights reserved.</p>
        </footer>

    </div>
</div>
<script>
    //JS 控制区域
    layui.use(['element', 'layer', 'util'], function() {
        // 底部固定区域
        var footer = document.getElementById("footer");
        var height = footer.offsetHeight;
        footer.style.bottom = "-" + height + "px";

        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        // 导航切换
        window.onload = function() {
            $("#ifr").attr("src", "/Home.jsp")
            getHitokoto();
        }
        // 函数定义全局作用域
        $(function() {
            window.getIndex = function() {
                $("#ifr").attr("src", "/Home.jsp")
            }
        })
        $(function() {
            window.getAnocement = function() {
                $("#ifr").attr("src", "/Notice.jsp")
            }
        })
        $(function() {
            window.getMessage = function() {
                $("#ifr").attr("src", "/AddMessage.jsp")
            }
        })
        $(function() {
            window.getManage = function() {
                $("#ifr").attr("src", "/SelectMessage?id=${id}")
            }
        })
        $(function() {
            window.getRecycle = function() {
                $("#ifr").attr("src", "/Recycle")
            }
        })
        $(function() {
            window.getRandom = function() {
                $("#ifr").attr("src", "https://api.vvhan.com/api/bing?rand=sj")
            }
        })
        $(function() {
            window.getHitokoto = function() {
                $.ajax({
                    // url: "https://v1.hitokoto.cn/?c=d",
                    url: "https://v1.hitokoto.cn/",
                    type: "get",
                    success: function(data) {
                        $("#hitokoto").html(data.hitokoto)
                    }
                })
            }
        })


        //头部事件
        util.event('lay-header-event', {
            menuLeft: function(othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {
                    icon: 0
                });
            },
            menuRight: function() { // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });

    });
    //
    // function iFrameHeight(){
    //     var ifm= document.getElementById("ifr");
    //     var subWeb = document.frames ? document.frames["ifr"].document :    ifm.contentDocument;
    //     if(ifm != null && subWeb != null) {
    //         $("#ifr").height(0);//此处关键处 莫忘  清除上一个子页面高度的影响
    //         $("#ifr").height(subWeb.body.scrollHeight);
    //     }
    // }

</script>
</body>

</html>
